<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-navbar :custom-style="navbarCustom" fixed safeAreaInsetTop>
					<template #title>
						<cityPicker @change="cityPickerChange">
							<text class="addr-text">{{ appCity }}</text>
							<wd-icon name="caret-down-small" color="#FFF" size="42rpx"></wd-icon>
						</cityPicker>
					</template>
					<template #right>
					</template>
				</wd-navbar>
				<image class="header-bg" src="https://lvshi.haidanet.com/uni-static/user/img/index/bg.png"></image>

				<view class="swiper">
					<wd-swiper height="256.25rpx" :list="swiperList" autoplay :current="0"></wd-swiper>
				</view>
				<view class="search">
					<wd-search @cancel="search" @search="search" v-model="lawyerName" placeholder="请输入您要搜索的律师姓名"
						placeholder-left custom-class="wd-search-custom-class-user" cancel-txt="找律师">
					</wd-search>
				</view>
				<view class="im-list">
					<view class="item" @click="doIm(1)">
						<view class="icon">
							<text class="iconfont icon-a-ic_fa_Priorityboarding"></text>
							<view class="text">智能匹配律师</view>
						</view>
						<view class="label">免费咨询</view>
					</view>
					<view class="item" @click="doIm(2)">
						<view class="icon">
							<text class="iconfont icon-dianhuazixun"></text>
							<view class="text">最快1分钟接通</view>
						</view>
						<view class="label">电话咨询</view>
					</view>
					<view class="item" @click="doIm(3)">
						<view class="icon">
							<text class="iconfont icon-zhuanjiazixun"></text>
							<view class="text">职业十年以上律师</view>
						</view>
						<view class="label">专家咨询</view>
					</view>
				</view>
				<view class="tools">
					<image class="tools-bg" src="https://lvshi.haidanet.com/uni-static/user/img/index/tools-bg.png">
					</image>
					<view class="left" @click="classListClick({isAll:true})">
						<view class="title">
							在线委托 选择委托类型
						</view>
						<view class="desc">
							<view>快速找优秀的律师获取</view>
							<view>深度解答</view>
						</view>
						<image src="https://lvshi.haidanet.com/uni-static/user/img/index/tools-1.png"></image>
						<view class="btn">查看</view>
					</view>
					<view class="rigth">
						<view class="item" @click="goPage('/tools/index/index')">
							<view class="text">
								<view class="title">工具</view>
								<view class="desc">诉讼工具使用</view>
								<view class="btn">点击查看</view>
							</view>
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/tools-2.png"></image>
							</view>
						</view>
						<view class="item" @click="goPage('/tools/lawsRegulations/index/index')">
							<view class="text">
								<view class="title">法律法规查询</view>
								<view class="desc">快速法律法规查询</view>
								<view class="btn">点击查看</view>
							</view>
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/tools-3.png"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="query-cooperate">
					<view class="query-cooperate-item" @click="goPage('/collaborative/release/release')">
						<view class="icon">
							<text class="iconfont icon--xietongbangong"></text>
						</view>
						<view class="text">
							<view class="title">协同</view>
							<view class="desc">优秀的律师协同办公</view>
						</view>
					</view>
					<view class="query-cooperate-item" @click="goPage('/query/release/release')">
						<view class="icon">
							<text class="iconfont icon-chaxunfuwu"></text>
						</view>
						<view class="text">
							<view class="title">查询</view>
							<view class="desc">快速找优秀的律师</view>
						</view>
					</view>
				</view>


				<view class="excellent-lawyer"><text>律师</text>推荐</view>
				<view class="list" v-if="!loading && dataList.length>0">
					<view class="item" v-for="(item,index) in dataList" @click="goPage2(item)">
						<view class="msg" @click.passive.stop="goPage1(item)">
							<text class="iconfont icon-wodezixun"></text>
							立即咨询
						</view>
						<view class="header">
							<view class="avatar">
								<image v-if="item.head" :src="item.head"></image>
								<image v-else src="@/static/logo.png"></image>
							</view>
							<view class="user">
								<view class="name">
									<text>{{ item.realname }}</text>
									<wd-rate size="20rpx" active-color="#C91C1F" num="5" v-model="item.star_nums"
										readonly />
								</view>
								<view class="number">
									服务总数<text>{{ item.service_nums }}</text>单
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="status" v-if="item.is_online===1">
								<wd-badge is-dot bg-color="#11BB65">
								</wd-badge>
								在线
							</view>
							<view class="status" v-if="item.is_online===0">
								<wd-badge is-dot bg-color="#C91C1F">
								</wd-badge>
								离线
							</view>
							<view class="tag" v-if="item.tags">
								<view class="item" v-for="(tag,tIndex) in item.tags">{{
										tag
									}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</wd-config-provider>
		<classListBox ref="classListBoxRef"></classListBox>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import { useToast } from '@/uni_modules/wot-design-uni';
	import { onPageScroll, onShow } from '@dcloudio/uni-app';

	import useStatusHeight from '@/hooks/useStatusHeight.ts';
	import useRouter from '@/hooks/useRouter';
	import useDataLoad from '@/hooks/useDataLoad.ts';
	import { getCateList, bannerList, getCategoryTwoList, getLawyerList } from "@/api/index.ts"
	import { useAppStore, useUserStore, useImStore } from '@/store';

	export default defineComponent({
		name: 'Index',
		components: {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 0) {
			// 	navbarCustom.value = `width: 100%;background-color: rgb(201, 28, 31) !important;`;
			// } else if (e.scrollTop === 0) {
			// 	navbarCustom.value = `width: 100%;background-color: transparent;`;
			// }
		},
		setup(props, ctx) {
			// 信息提示
			const toast = useToast();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const router = useRouter();
			const appStore = useAppStore();
			const userStore = useUserStore();
			const imStore = useImStore();
			const statusHeigt = useStatusHeight();
			const dataLoad = useDataLoad(getLawyerList);
			let navbarCustom = ref(`width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: transparent; `);
			const lawyerName = ref("");
			const classListBoxRef = ref(null);
			const swiperList : any = ref([
			]);
			const appCity = computed(() => {
				return appStore.city
			})
			const cityCode = computed(() => {
				return appStore.cityCode
			})
			const cityPickerChange = (e : any) => {
				appStore.setCity({
					city: e.label,
					cityCode: e.code// 获取城市代码，根据实际情况修改索引值。
				});
				dataLoad.setParams({
					city: cityCode.value
				});
				dataLoad.reGetData();
			}
			const imgsName : any = {

				"service0": 'https://lvshi.haidanet.com/uni-static/user/img/index/1.png',
				"service1": 'https://lvshi.haidanet.com/uni-static/user/img/index/2.png',
				"service2": 'https://lvshi.haidanet.com/uni-static/user/img/index/3.png',
				"service3": 'https://lvshi.haidanet.com/uni-static/user/img/index/4.png',
				"service4": 'https://lvshi.haidanet.com/uni-static/user/img/index/5.png',
				"service5": 'https://lvshi.haidanet.com/uni-static/user/img/index/6.png',
			}
			const classifyList = ref([]);


			const toolsList = [
				{
					name: "法律法规查询",
					// img: statute,
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/statute.png",
					url: "/tools/lawsRegulations/index/index"
				},
				{
					name: "工具",
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/compensate.png",
					url: "/tools/index/index"
					// img: compensate,
				},
				{
					name: "诉讼费计算",
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/public-prosecution.png",
					url: "/tools/litigation/litigation"
					// img: prosecution,
				},

			];
			const serviceList = computed(() => {
				return appStore.consultList.map((item : any, index : any) => {
					return {
						...item,
						name: item.title,
						desc: item.desc,
						img: imgsName[`service${index}`]
					}
				})

			})
			const city = ref("徐州")
			// 地区选择
			const columnCount = ref(2);
			const defaultValue = ref('');
			const visible = ref(false);
			const search = () => {
				router.switchTab("/pages/lawyer/lawyer");
				uni.setStorageSync('lawyerName', lawyerName.value); // 存储搜索的律师名字，以便在律师列表页面使用
			}
			const goPage = (url : any, params ?: any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params
				})
			}
			const classListClick = (item : any) => {
				if (item.isAll) {
					classListBoxRef.value.handleOpen();
				} else {
					goPage('/case/release/release', { categoryId: item.id })
				}

			}
			const doChoice = () => {
				visible.value = true;
			}


			const cancel = () => {
				visible.value = false; // 关闭弹框
			};
			const goServiceInfo = (id : any) => {
				router.push({
					url: '/im/consult/consult',// 跳转到服务详情页面，需要根据实际情况修改URL路径和参数传递方式。
					params: {
						consult: id,
					},
				});
			}

			const doIm = (imTypeId : any) => {
				imStore.doIm(imTypeId);
			}
			const goPage2 = (item : any) => {
				router.push({
					url: "/im/lawyer/lawyer",
					params: {
						lawyer: item.id
					}, // 传递参数，例如搜索条件等。
				})
			};
			const goPage1 = (item : any) => {
				// 1 免费
				// 2 通话
				// 3 图文 = 专家
				imStore.doIm(3, item.id)
			};
			onShow(() => {
				appStore.getConsultList(); // 初始化应用配置
				appStore.getAppConfig(); // 初始化应用配置
				userStore.getUserInfo(); // 初始化用户信息
				dataLoad.setParams({
					city: cityCode.value
				});
				dataLoad.getData();
				bannerList().then((res : any) => {
					swiperList.value = res.map((item : any) => {
						return item.image
					});
				});

				// 获取案件分类
				getCateList().then((res : any) => {
					classifyList.value = res.map((item : any, index : number) => {
						return {
							...item,
							name: item.title,
							// img: imgsName[item.title]
						}
					})
					classifyList.value.push({
						name: "全部类型",
						img: 'https://lvshi.haidanet.com/uni-static/user/img/index/classify-all.png',
						isAll: true
					})
				})
				if (!appStore.city) {
					appStore.setCity({ city: "武汉市" }); // 存储城市信息到pinia中，以便在律师列表页面使用。	
				}
			})
			onPageScroll((e) => {
				if (e.scrollTop > 0) {
					navbarCustom.value = `width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: rgb(201, 28, 31) !important;`;
				} else if (e.scrollTop === 0) {
					navbarCustom.value = `width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: transparent; `;
				}
			});

			return {
				theme,
				statusHeigt,
				navbarCustom,
				swiperList,
				classifyList,
				toolsList,
				serviceList,
				doChoice,
				columnCount,
				defaultValue,
				visible,
				cancel,
				goServiceInfo,
				goPage,
				lawyerName,
				search,
				appCity,
				cityPickerChange,
				doIm,
				goPage2,
				goPage1,
				classListClick,
				classListBoxRef,
				...dataLoad,
			};
		},
	});
</script>

<style lang="less" scoped>
	.container {
		background-color: #F2F2F2;
		position: relative;

		/deep/.city {
			background-color: transparent !important;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
		}

		.addr-text {
			font-size: 28rpx;
			font-weight: 700;
			color: #FFF;
			margin: 0 10rpx;
		}

		.addr {}

		.news {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wd-navbar {
			// top: var(--status-bar-height);
		}

		:deep(.wd-navbar) {
			position: fixed;
			width: 100%;
			height: 100rpx;
			// #ifdef MP
			height: 96rpx !important;
			line-height: 96rpx !important;
			// #endif
			background-color: transparent !important;

			// #ifdef MP
			.wd-navbar__right {
				top: -10rpx;
			}

			// #endif
			.wd-navbar__right:hover {
				background-color: transparent !important;
			}

			.wd-navbar__title {
				margin: 0;
				display: flex;
				align-items: center;
				max-width: 70%;
				// #ifdef MP
				max-width: 90%;
				// #endif
			}

			&::after {
				display: none !important;
			}
		}

		.header-bg {
			width: 750rpx;
			height: 454rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.swiper {
			position: relative;
			width: 693rpx;
			top: 183rpx;
			left: 26rpx;
			height: 256rpx;

		}

		:deep(.wd-swiper) {
			width: 693rpx;
			height: 256rpx;
			background: #CF1010;
			border-radius: 14rpx;
			overflow: hidden;

			.wd-swiper__track {
				border-radius: 0;
			}

			.wd-swiper-nav {
				bottom: 44rpx;
			}
		}

		.search {
			margin-top: 228rpx;
			position: relative;
			left: 26rpx;
			width: 694rpx;

			:deep(.wd-search-custom-class-user) {
				background-color: transparent;
				padding: 0;

				.wd-search__cancel {
					width: 100rpx;
					height: 83rpx;
					line-height: 83rpx;
					border-radius: 12rpx;
					background: #c91c1f;

					font-size: 28rpx;
					font-weight: 700;
					color: #FFF;
					text-align: center;
					padding: 0 24rpx !important; // 调整内边距

				}

				.wd-search__block {
					background-color: #FFF !important;
					width: calc(100% - 100rpx);
					height: 83rpx;
					background: #FFFFFF;
					border-radius: 14rpx 0 0 14rpx;

					.wd-search__search-left-icon.wd-icon-search {
						display: none;
					}

					.wd-search__input {
						padding-left: 24rpx;
						margin-left: 24rpx;
					}

					.wd-search__cover {
						background-color: #FFF !important;
					}
				}
			}
		}

		.tools {
			// padding: 26rpx;
			margin: 26rpx;
			width: calc(100vw - 26rpx * 4);
			height: 381rpx;
			border-radius: 14rpx;
			position: relative;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			padding: 26rpx;

			&-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			>.left {
				position: relative;
				z-index: 1;


				image {
					position: absolute;
					width: calc(209rpx - 55rpx);
					height: calc(174rpx - 55rpx);
					right: 30rpx;
					top: 203rpx;
				}

				>.btn {
					background: #F96B6B;
					border-radius: 16rpx;
					display: inline;
					padding: 10rpx 30rpx;
					font-family: PingFang;
					font-weight: bold;
					font-size: 26rpx;
					color: #FFFFFF;
					position: absolute;
					top: 260rpx;
					left: 0rpx;
				}

				>.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;

					&::after {
						content: '';
						display: block;
						width: 74rpx;
						height: 4rpx;
						background: #FFFFFF;
						border-radius: 2rpx;
						margin-top: 20rpx;
					}
				}



				>.desc {
					font-family: PingFang;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 20rpx
				}
			}

			.rigth {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				>.item {
					width: 248rpx;
					height: 149rpx;
					background: #FFCCCC;
					box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
					border-radius: 7rpx;
					display: flex;
					justify-content: space-between;
					padding: 18rpx;
					position: relative;

					>.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						>.title {
							font-family: PingFang;
							font-weight: bold;
							font-size: 28rpx;
							color: #FFFFFF;
							position: relative;
							z-index: 2;
						}

						>.desc {
							font-family: PingFang;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
							margin-top: 14rpx;
							position: relative;
							z-index: 2;
						}

						>.btn {
							background: #CF1010;
							border-radius: 16rpx;
							padding: 10rpx 30rpx;
							font-family: PingFang;
							font-weight: bold;
							font-size: 26rpx;
							color: #FFFFFF;
							margin-top: 11rpx;
							position: relative;
							z-index: 2;
							width: 104rpx;
						}
					}

					>.icon {
						position: absolute;
						right: 0;
						bottom: 0;
						z-index: 0;

						>image {
							width: calc(209rpx - 55rpx);
							height: calc(174rpx - 55rpx);

						}
					}
				}
			}

		}

		.im-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			padding: 0 26rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				min-width: 30%;

				.icon {
					width: 208rpx;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					image {
						width: 59rpx;
						height: 62rpx;
					}

					.iconfont {
						color: #CF1010;
						font-size: 60rpx;
						margin-bottom: 10rpx;
					}

					.text {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.label {
					font-family: PingFang;
					font-weight: bold;
					font-size: 34rpx;
					color: #000000;
					margin-top: 24rpx;
				}
			}
		}

		.query-cooperate {
			width: calc(100vw - 26rpx - 26rpx);
			padding: 0 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			&-item {
				width: calc(48% - 44rpx);
				padding: 22rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 100rpx;
					height: 100rpx;
					background: #FFDADA;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;

					.iconfont {
						color: #CF1010;
						font-size: 60rpx;
					}
				}

				.text {
					.title {
						font-family: PingFang;
						font-weight: bold;

						font-size: 34rpx;
						color: #CF1010;
					}

					.desc {
						font-family: PingFang;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-top: 20rpx;
					}
				}
			}
		}

		.excellent-lawyer {
			font-size: 34rpx;
			font-weight: 700;
			color: #000;
			padding: 27rpx 26rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: #CF1010;
			}

			&::after {
				content: '';
				display: block;
				width: 18rpx;
				height: 18rpx;
				background: #CF1010;
				margin-left: 40rpx;
				transform: rotateZ(45deg);
			}

			&::before {
				content: '';
				display: block;
				width: 18rpx;
				height: 18rpx;
				background: #CF1010;
				margin-right: 40rpx;
				transform: rotateZ(45deg);
			}
		}

		.list {
			padding: 27rpx 26rpx 27rpx;

			>.item {
				min-height: 200rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 2rpx solid #EEEEEE;
				border-radius: 15rpx;
				margin-bottom: 27rpx;
				position: relative;

				.msg {
					width: 138rpx;
					height: 40rpx;
					background: linear-gradient(-33deg, #C91C1F 0%, #CA1C1F 100%);
					border-radius: 25rpx 0 0 25rpx;
					padding: 5rpx 10rpx;
					position: absolute;
					right: 0;
					top: 20rpx;


					font-family: PingFang;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center; // 垂直居中显示文字和图标。
					justify-content: center; // 水平居中显示文字和图标。

					.iconfont {
						margin-right: 12rpx;
					}
				}

				.header {
					display: flex;
					justify-content: space-between; // 水平方向上元素平均分布，两端对齐
					align-items: flex-start; // 垂直方向上元素居中对齐，垂直居中
					padding: 24rpx 24rpx 0 24rpx; // 调整内边距，使元素在容器内居中显示。

					.avatar {
						width: 100rpx; // 设置头像宽度，使元素在容器内居中显示。
						height: 100rpx; // 设置头像高度，使元素在容器内居中显示。
						border-radius: 50rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user {
						width: calc(100% - 100rpx);
						padding-left: 24rpx;

						.name {
							display: flex;
							align-items: center;

							text {
								font-family: PingFang;
								font-weight: 400;
								font-size: 33rpx;
								color: #000000;
							}


							.wd-rate {
								margin-left: 24rpx;

								:deep(.wd-rate__item-star) {
									height: 100% !important;
								}
							}
						}

						.number {
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 18rpx;

							text {
								color: #c91c1f;
							}
						}

						&::after {
							content: " ";
							display: inline-block;
							width: 100%; // 设置为0即可隐藏边框线
							height: 1rpx; // 设置为0即可隐藏边框线
							background-color: #EEEEEE; // 设置为透明即可隐藏边框线
						}
					}

				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 24rpx;

					.status {
						width: 100rpx;
						text-align: center;
						font-family: PingFang;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 24rpx;

						.wd-badge {
							margin-right: 5rpx;
						}
					}

					.tag {
						width: calc(100% - 100rpx - 24rpx);
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;

						.item {
							padding: 10rpx 20rpx;
							background: #F2F2F2;
							border-radius: 15rpx;
							font-family: PingFang;
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							margin-left: 24rpx;
							margin-top: 24rpx;
						}
					}
				}
			}
		}




	}
</style>